﻿<style>
    .padding5 {
        padding-left: 5px;
        padding-right: 5px;
    }

    .mb6_nav {
        font-family: "STHeiti","Microsoft YaHei","黑体","arial";
        font-size: 0.7rem;
        background: #ff5948;
        border: none;
        border-radius: 0;
    }

        .mb6_nav .navbar-brand {
            color: #fff;
        }

        .mb6_nav .navbar-toggle .icon-bar {
            background: #fff;
        }

    .swiper-container {
        width: 100%;
        background: #fff;
    }

    .swiper-slide {
        display: block;
        width: 100%;
        margin-right: 0px;
        padding-top: 46.875%;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center; /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }

        .swiper-slide a {
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0px;
            left: 0px;
        }

    .swiper-pagination-bullet {
        width: 8px;
        height: 2px;
        border-radius: 0px;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px; /*box-shadow: rgba(0,0,0,.5) 0 0 7px;*/
    }

    .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
        margin: 0 3px;
    }

    .mb6_banner .swiper-slide a {
    }

        .mb6_banner .swiper-slide a img {
            max-width: 100%;
        }

    .mb6_users {
        background: #fff;
        font-family: "STHeiti","Microsoft YaHei","黑体","arial";
    }

        .mb6_users ul {
            margin-bottom: 0;
            padding-left: 0;
            list-style: none;
        }

        .mb6_users li {
            float: left;
            width: 33.3333%;
        }

            .mb6_users li a {
                display: block;
                padding: 0.5rem 0;
                color: #333;
                border-right: 1px solid #ddd;
            }

                .mb6_users li a img {
                    display: block;
                    padding: 0.25rem;
                    margin: auto;
                    width: 60%;
                    border-radius: 50%;
                    border: 1px solid #d6d6d6;
                    background: #fff;
                }

                .mb6_users li a span {
                    display: block;
                    text-align: center;
                }

            .mb6_users li:nth-child(3) a {
                border-right: 0;
            }

    .mb6_news {
        margin-top: 0.5rem;
        background: #fff;
        font-family: "STHeiti","Microsoft YaHei","黑体","arial";
    }

    .mb6_news_t {
        color: #ff5d40;
        font-size: 1rem;
        line-height: 2.3rem;
        height: 2.3rem;
    }

        .mb6_news_t span.pull-left {
            display: block;
            margin-top: 0.65rem;
            margin-right: 0.75rem;
            width: 0.3rem;
            height: 1rem;
            background: #ff5d40;
        }

        .mb6_news_t span.pull-right a {
            display: block;
            font-size: 1.5rem;
            height: 2.3rem;
            width: 2rem;
            text-align: center;
            line-height: normal;
            color: #ff5d40;
        }

    .mb6_news_c {
    }

        .mb6_news_c ul {
            padding-left: 0;
            list-style: none;
        }

        .mb6_news_c li {
            padding: 0 1rem;
            border-bottom: 1px solid #d9d9d9;
        }

            .mb6_news_c li a {
                display: block;
                padding-left: 0.75rem;
                background: url(style/images/mb6_bg1.png) left no-repeat;
                height: 2.3rem;
                line-height: 2.3rem;
                color: #585858;
                overflow: hidden;
            }

    .mb6_copy {
        font-family: "STHeiti","Microsoft YaHei","黑体","arial";
        font-size: 0.7rem;
        text-align: center;
    }

    @media (max-width: 767px) {
        .navbar-toggle {
            background: none;
            border: none;
        }

        .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
            background: none;
            border: none;
        }

        body {
            position: absolute;
            left: 0;
            right: 0;
            overflow-x: hidden;
            backface-visibility: hidden;
            transition: all 0.3s ease-in-out;
            transition-delay: 0s;
        }

            body.out {
                left: -200px;
                right: 200px;
                top: auto;
                overflow: hidden;
            }

            body.off-canvas-nav-left.out {
                left: 200px;
                right: -200px;
            }

        .container-fluid > .navbar-collapse, .container > .navbar-collapse {
            margin-left: 0;
            margin-right: 0;
        }

        nav.navbar-fixed-top {
            transition: all 0.3s ease-in-out;
            transition-delay: 0s;
        }

            nav.navbar-fixed-top.out {
                transform: translate3d(-200px,0,0);
            }

        body.off-canvas-nav-left nav.navbar-fixed-top.out {
            transform: translate3d(200px,0,0);
            transition-delay: 0.3s;
        }

        nav .navbar-nav {
            margin: 0 -15px 7.5px -15px;
        }

        nav .navbar-toggle {
            transition: all 500ms ease-in-out;
        }

        body.out nav .navbar-toggle {
            background-color: #ddd;
        }

        body.off-canvas-nav-left nav .navbar-toggle {
            float: left;
            margin-left: 15px;
            margin-right: 0;
        }

        nav .navbar-toggle .icon-bar {
            transition: all 500ms ease-in-out;
            background: #fff;
        }

        body.out nav .navbar-toggle .icon-bar:nth-of-type(2) {
            transform: translate3d(0,6px,0) rotate(45deg);
        }

        body.out nav .navbar-toggle .icon-bar:nth-of-type(3) {
            opacity: 0;
        }

        body.out nav .navbar-toggle .icon-bar:nth-of-type(4) {
            transform: translate3d(0,-6px,0) rotate(-45deg);
        }

        nav .navbar-collapse {
            display: block !important;
            position: fixed;
            top: 0;
            right: -200px;
            bottom: 0;
            z-index: 10000;
            width: 200px;
            height: 100vh !important;
            margin: 0;
            background-color: inherit;
            border: none;
            box-shadow: none;
            border-left: 1px solid #e7e7e7;
            transition: all 0.3s ease-in-out;
        }

        body.out nav .navbar-collapse {
            box-shadow: 0 0px 5px 0px rgba(0,0,0,0.75);
            transform: translate3d(-200px,0,0);
        }

        nav.navbar-fixed-top .navbar-collapse {
            right: -200px !important;
            max-height: none;
        }

        body.out nav.navbar-fixed-top .navbar-collapse {
            box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
            -webkit-transform: none;
        }

        body.off-canvas-nav-left nav .navbar-collapse {
            left: -200px;
            right: auto;
            border: none;
            border-right: 1px solid #e7e7e7;
        }

        body.off-canvas-nav-left.out nav .navbar-collapse {
            box-shadow: 0 0px 5px 0px rgba(0,0,0,0.75);
            transform: translate3d(200px,0,0);
        }

        body.off-canvas-nav-left.out nav.navbar-fixed-top .navbar-collapse {
            box-shadow: 0 0px 5px 0px rgba(0,0,0,0.75);
            -webkit-transform: none;
        }

        nav .navbar-collapse .dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover {
            background-color: #eee !important;
        }

        nav .navbar-collapse .dropdown > .dropdown-menu, nav .navbar-collapse .dropdown > .dropdown-menu > .dropdown-submenu > .dropdown-menu {
            display: block !important;
            position: static;
            float: none;
            max-height: 0;
            margin: 0;
            padding: 0;
            border: none;
            box-shadow: none;
            overflow: hidden;
            transition: all .5s ease-in-out;
        }

        nav .navbar-collapse .dropdown .dropdown-menu li a, nav .navbar-collapse .dropdown .dropdown-menu li.dropdown-header {
            padding: 5px 15px 5px 25px;
            color: rgb(119, 119, 119);
        }

        nav .navbar-collapse .dropdown.open .dropdown-menu, nav .navbar-collapse .dropdown.open .dropdown-menu > .dropdown-submenu.open > .dropdown-menu {
            max-height: 100vh;
        }

        nav .dropdown-toggle > .caret {
            transform: rotate(0) !important;
        }

        nav .open > .dropdown-toggle > .caret {
            transform: rotate(180deg) !important;
        }

        nav .navbar-form {
            margin-top: 0;
            margin-bottom: 0;
            border: none;
            box-shadow: none;
        }
    }
</style>
<div class="page" id="page-index" ng-app="app" ng-controller="APPCtrl">
    <div class="content">
        <div class="content-inner">
            <header class="bar bar-nav" style="background-color:#ff5d40;">
                <a href="javascript:;" class="open-panel pull-right"> <span class="icon icon-menu" style="color:#fff;"></span></a>
                <h1 class="title" style="color:#fff;">Template</h1>
            </header>
            <div style="height:44px;"></div>
            <div id="topnav" class="com swiper-container mb6_banner" style="height: 175px;">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" ng-repeat="item in coms.topnav.list">
                        <a href="{{getlink(item)}}">
                            <img ng-src="{{item.wxico}}" />
                        </a>
                    </div>
                </div>
                <div class="swiper-pagination swiper-pagination-white"></div>
            </div>
            <div class="com mb6_users" id="pics">
                <ul>
                    <li ng-repeat="item in coms.pics.list"><a href="{{getlink(item)}}"><img ng-src="{{item.wxico}}" /><span ng-bind="item.title"></span></a></li>
                    <div class="clearfix"></div>
                </ul>
            </div>
            <div class="mb6_news">
                <div class="mb6_news_t"><span class="pull-left"></span>新闻动态<span class="pull-right"><a href="{{getlink(item)}}"><i class="fa fa-angle-right"></i></a></span><div class="clearfix"></div></div>
                <div class="mb6_news_c">
                    <ul class="com" id="conbody">
                        <li ng-repeat="item in coms.conbody.list"><a href="{{getlink(item)}}"><span ng-bind="item.title"></span><span class="pull-right"><i class="fa fa-angle-right"></i></span></a></li>
                        <div class="clearfix"></div>
                    </ul>
                </div>
            </div>
            <div class="mb6_copy">&copy;2016 广告 版权所有<br />本网站使用 <a href="#">逐浪CMS</a> 搭建</div>
        </div>
    </div>
</div>
<div class="panel panel-right panel-reveal" style="background-color:#f0f0f0;">
    <div class="content-block">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#"><i class="fa fa-home"></i> 首页</a></li>
            <li><a href="#"><i class="fa fa-list"></i> 产品展示</a></li>
            <li><a href="#"><i class="fa fa-file-text"></i> 新闻动态</a></li>
            <li><a href="#"><i class="fa fa-comment"></i> 留言板</a></li>
            <li><a href="#"><i class="fa fa-user"></i> 关于我们</a></li>
        </ul>
    </div>
</div>
<link href="/design/h5/css/swiper.min.css" rel="stylesheet" />
<script src="/design/h5/js/swiper.min.js"></script>
<script>
    angular.module("app", []).controller("APPCtrl", function ($scope) {
        Zepto.init();
        Zepto.showIndicator();
        tools.site = "{$site}";
        tools.extend($scope);
        $scope.coms = [];
        //---------------------------------------------------------------------------//
        $scope.coms["topnav"] = { type: "nav", list: [] };
        $scope.coms["pics"] = { type: "list", list: [] };
        $scope.coms["conbody"] = { type: "list", list: [] };
        //---------------------------------------------------------------------------//
        //能否优化为一次取出,然后再划分(微站内容中的数据)
        tools.getdata({ nodename: escape("微站图片") }, function (result) {
            $scope.coms["topnav"].list = result;
            $scope.$digest();
            setTimeout(tools.nav.init, 500);
        })
        tools.getdata({ nodename: escape("微站内容"), dbtype: "list" }, function (result) {
            var list = result;
            $scope.coms["pics"].list = list;
            $scope.$digest();
        });
        tools.getdata({ nodename: escape("微站内容"), dbtype: "list2" }, function (result) {
            var list = result;
            $scope.coms["conbody"].list = list;
            $scope.$digest();
            Zepto.hideIndicator();
            tools.init();
        });
    });
</script>